export const line = () => {
    return `
    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  
  const state = reactive({
    option: {
  
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads'],
          textStyle: {
            color: '#D3E4FE',
            fontSize: 16,
        },
        left:20,
        top: 10,
        itemWidth: 15,
        itemGap: 18,
        itemHeight: 18,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
    
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            color: "#97B2E0",
          },
        },
        yAxis: {
          type: 'value',
          name:"(万元)", 
         
          nameTextStyle: {
              color:"#97B2E0",
              padding:[0,0,-550,-50]
          },
          axisLabel: {
            color: "#97B2E0",
          },
          splitLine: {
            show: true,
            lineStyle: {
                type: [1,2],
                dashOffset: 1,
                color: '#A4DAFF'
            }
        },
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            symbolSize: 10,
            color:"#00FFE4",
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            smooth: true,
            symbolSize: 10,
            color:"#DE980F",
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          
        ]
      }
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    `;
  };
  